import React from 'react';
import { Line ,Funnel} from '@ant-design/charts';

const Page = () => {
    const data = [
        { action: '业绩', pv: 50000 },
        { action: '毛利', pv: 35000 },
        { action: '纯利', pv: 25000 },
        { action: '扣除成本后', pv: 15000 },
        { action: '最终盈利', pv: 8000 },
      ];
    
      const config = {
        data,
        xField: 'action',
        yField: 'pv',
        shapeField: 'pyramid',
        label: [
          {
            text: (d) => d.pv,
            position: 'inside',
            fontSize: 16,
          },
          {
            render: ($, _, i) => {
              if (i)
                return (
                  <div
                    style={{
                      height: 1,
                      width: 30,
                      background: '#aaa',
                      margin: '0 20',
                    }}
                  ></div>
                );
            },
            position: 'top-right',
          },
          {
            text: (d, i, data) => {
              if (i) return ((d.pv / data[i - 1].pv) * 1000).toFixed(2) + '%';
            },
            position: 'top-right',
            textAlign: 'left',
            textBaseline: 'middle',
            dx: 40,
          },
        ],
      };
    
      return <Funnel {...config} />;
};
export default Page;